<template>
    <div>
        <!-- 分页列表 -->
        <div class="panel _stretch">
            <div class="panel-head">
                <div class="panel-head-l">分页列表</div>
            </div>
            <div class="panel-body flex1 flex-col">
                <div class="flex1">
                    <!-- 表格 -->
                    <el-table :data="aTable"
                              height="100%"
                              stripe>
                        <el-table-column label="序号"
                                         type="index"
                                         :index="nStartno"
                                         align="center"
                                         width="80">
                        </el-table-column>
                        <el-table-column property="name"
                                         label="学校名称"
                                         align="center">
                        </el-table-column>
                        <el-table-column label="操作"
                                         align="center"
                                         width="200">
                            <template v-slot="oRow">
                                <el-button @click="fTableBtnClick('view', oRow.row)">查看</el-button>
                                <el-button @click="fTableBtnClick('edit', oRow.row)">修改</el-button>
                                <el-button plain
                                           icon="el-icon-delete"
                                           type="danger"
                                           @click="fTableBtnClick('delete', oRow.row)"></el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页条 -->
                <wiv-pagebar ref="pagebar"
                             @after-flip="fAfterFlip"></wiv-pagebar>
            </div>
        </div>
    </div>
</template>

<script>
    import { URLS_DEMO } from '@/urls';

    export default {
        //**** el, name
        //**** components, directives
        //**** extends, mixins, provide/inject
        //**** props, data, computed
        data() {
            return {
                //-- 表格 --
                nStartno: 0,//当前页数据的开始序号（从1开始）
                aTable: [],//表格数据
            };
        },
        //**** watch
        //**** 生命周期钩子：mounted, updated, beforeDestroy 等
        mounted() {
            this.fResetTable();
        },
        beforeDestroy() {
        },
        //**** methods
        methods: {
            //*** 开放给父子组件的接口方法
            //*** 事件响应函数
            //表格按钮点击事件
            fTableBtnClick(sType, oRow) {
                console.log(sType, oRow.name);
            },
            fAfterFlip(aData, oPageApi) {
                this.aTable = aData;
                this.nStartno = oPageApi.startno;
            },
            //*** 其他
            //请求表格数据
            fResetTable() {
                this.$refs.pagebar.fReset({
                    url: URLS_DEMO.d_pagelist
                });
            },
        }
        //**** template, render
    };
</script>

<style lang="less" rel="stylesheet" scoped>
</style>
